<template>
  <div id="app">
    <!-- 网络状态指示器 (仅离线时显示) -->
    <NetworkStatus />

    <!-- 主导航 -->
    <el-container class="main-container">
      <el-header class="app-header">
        <div class="header-content">
          <h1 class="app-title">
            <el-icon><DataAnalysis /></el-icon>
            PPH生产效率系统
          </h1>
          <div class="header-info">
            <el-tag type="info" size="small">v1.0.0</el-tag>
            <el-tag :type="networkStore.isOnline ? 'success' : 'danger'" size="small">
              {{ networkStore.isOnline ? '在线' : '离线' }}
            </el-tag>
          </div>
        </div>

        <!-- 主导航菜单 -->
        <el-menu
          :default-active="$route.path"
          mode="horizontal"
          router
          class="main-nav"
        >
          <el-menu-item index="/data-entry">
            <el-icon><Edit /></el-icon>
            数据录入
          </el-menu-item>
          <el-menu-item index="/target-management">
            <el-icon><Setting /></el-icon>
            目标值管理
          </el-menu-item>
          <el-menu-item index="/estimate-management">
            <el-icon><TrendCharts /></el-icon>
            预估值管理
          </el-menu-item>
          <el-menu-item index="/reports">
            <el-icon><DataLine /></el-icon>
            报表分析
          </el-menu-item>
          <el-menu-item index="/record-maintenance">
            <el-icon><Tools /></el-icon>
            记录维护
          </el-menu-item>
          <el-menu-item index="/settings">
            <el-icon><Tools /></el-icon>
            系统设置
          </el-menu-item>
          <el-menu-item index="/docs/calculation">
            <el-icon><HelpFilled /></el-icon>
            计算说明
          </el-menu-item>
        </el-menu>
      </el-header>

      <el-main class="app-main">
        <router-view />
      </el-main>
    </el-container>

    <!-- 全局加载指示器 -->
    <div
      v-loading="globalStore.isLoading"
      :element-loading-text="globalStore.loadingText"
      element-loading-background="rgba(0, 0, 0, 0.7)"
      style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none;"
      v-if="globalStore.isLoading"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { DataAnalysis, Edit, Setting, TrendCharts, DataLine, Tools, HelpFilled } from '@element-plus/icons-vue'
import { onMounted } from 'vue'

import NetworkStatus from './components/NetworkStatus.vue'
import { useGlobalStore } from './stores/globalStore'
import { useNetworkStore } from './stores/networkStore'

const networkStore = useNetworkStore()
const globalStore = useGlobalStore()

onMounted(() => {
  // 初始化网络监控
  networkStore.startMonitoring()
  
  // 检查系统状态
  globalStore.checkSystemHealth()
})
</script>

<style scoped>
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.main-container {
  min-height: 100vh;
}

.app-header {
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  padding: 0;
  position: relative;
  z-index: 100;
  height: auto;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
}

.app-title {
  margin: 0;
  color: #409eff;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-info {
  display: flex;
  gap: 8px;
}

.main-nav {
  border-bottom: none;
  background: #fff;
}

.app-main {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 120px);
  overflow-x: hidden;
}
</style>
